<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/goods.css">
</head>
<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h1 class="panel-title my-title">商品管理</h1>
            </div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                      <label for="good-id">id:</label>
                      <input disabled v-model.number='goodID' type="text" class="form-control" id="good-id" placeholder="商品id">
                    </div>
                    <div class="form-group">
                      <label for="good-name">name:</label>
                      <input @keyup.enter="add" v-model='goodName' type="text" class="form-control" id="good-name" placeholder="商品名称">
                    </div>
                    <button @click='add' type="button" class="btn btn-success btn-sm">添加</button>
                    <div class="form-group">
                        <label for="keywords">关键字搜索:</label>
                        <input v-model="key" type="text" class="form-control" id="keywords" placeholder="商品关键字">
                      </div>
                  </form>
            </div>
            <div v-if="search.length>0">
                <table class="table table-striped table-hover table-bordered">
                    <tr>
                        <th>序号</th>
                        <th>名字</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                    <tr 
                    
                    v-for='(item,index) in search'
                    :key='item.id'
                    :class="[index%2==0?'success':'info']"
                    >
                        <td>{{index}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.time | dateFormat}}</td>
                        <td>
                            <a href="#" @click.prevent="remove(index)">删除</a>
                        </td>
                    </tr>
                    
                </table>
            </div>
            <div v-else>
                <h1>暂无数据</h1>
            </div>
            <div class="panel-footer">Panel footer</div>
          </div>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="./js/goods.js"></script>
</html>